<template>
  <div>
    <div class="login-bg">

      <div class="login-main">
        <div class="login-text">
          <img src="../../assets/images/logo.png" alt="" class="logo">
          <h1 class="">欢迎你,小吃货</h1>
        </div>
        <div class="login-from">
          <el-form ref="form" :model="form">

            <el-form-item>
              <el-input v-model="form.uname" placeholder="请输入用户名----admin"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.upwd" placeholder="请输入密码----admin" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" class="login-btn w-100" @click="login()">登录</el-button>
            </el-form-item>
            <el-form-item>

              <el-button :span="24" class="reg-btn w-100" @click="reg()">
                注册
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="login-box">
          <li class="icong-box">
            <a href="http://wpa.qq.com/msgrd?v=3&uin=2241732546&site=qq&menu=yes">
              <div class="icon-bg">
                <i class="iconfont iconQQ"></i>
              </div>
              <p>QQ</p>
            </a>
          </li>
          <li class="icong-box">
            <a href="weixin://">
              <div class="icon-bg">
                <i class="iconfont iconweixin2"></i>
              </div>
              <p>微信</p>
            </a>
          </li>
          <li class="icong-box">
            <a href="https://weibo.com/6173159697/profile?rightmod=1&wvr=6&mod=personinfo">
              <div class="icon-bg">
                <i class="iconfont iconweibo1"></i>
              </div>
              <p>微博</p>
            </a>
          </li>
        </div>
      </div>



    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          uname: '',
          upwd: '',
        }
      }
    },
    created() {
      this.uname = localStorage.getItem('sname')
      this.upwd = localStorage.getItem('spwd')
    },
    methods: {
      login() {
        // 非空验证
        if (this.form.uname == "") {
          this.$message('用户名不能为空');
        } else if (this.form.upwd == "") {
          this.$message('密码不能为空');
        }
        // 验证
        else if (this.form.uname == "admin" && this.form.upwd == "admin") {
          var $router=this.$router

             this.$message({
            message: '登录成功，跳转中',
            type: 'success',
            onClose(){
             $router.push('/home')
            }
          });
        } else if (this.form.uname == this.uname && this.form.upwd == this.upwd) {
          var $router=this.$router

          // 读取存储的账号密码
          this.$message({
            message: '登录成功，跳转中',
            type: 'success',
             duration:1000,
            onClose(){
             $router.push('/home')
            }
          });
        } else {
          this.$message({
            message: '用户名或密码不正确',
            type: 'warning'
          });
        }
      },
      reg() {
        this.$router.push('/reg')
      }
    }

  }

</script>
<style lang="scss" scoped>

</style>
